<template>
    <div class="m-content">
        <a href="player.html" v-for="(m, idx) in movies" :key="m">
            <el-card style="margin: 5px;">
                <div class="box-card">
                    <div class="m-cover">
                        <div style="height:100%; display: flex;justify-content: center; align-items: center;">
                            <img :src="'img/' + m.cover" @mouseover="hover_idx = idx" @mouseout="hover_idx=-1" :class="{'hover-on': idx==hover_idx, 'hover-off': idx!=hover_idx}">
                        </div>

                    </div>
                    <div class="m-tip">
                        <div>名称：{{ m.name }}</div>
                        <div>tip：{{ m.tip }}</div>
                    </div>
                </div>
            </el-card>
        </a>
    </div>
</template>

<script>
    module.exports={
        data: function () {
            return {
                channel: '',
                movies: [],
                hover_idx: 0
            }
        },
        created: function(){
            this.getContent(this.$route.params.type)
        },
        watch: {
            '$route'(to, from){
                this.getContent(to.params.type)
            }
        },
        methods: {
            getContent(path){
                this.channel = path
                //console.log(path)
                let vm = this
                $util.$http.get('hello.json')
                    .then(resp=>{
                        vm.movies = resp.data.list
                    })
            }
        }
    }
</script>

<style scoped>
    .m-content{
        display: flex;
        /*flex-direction: row;*/
        flex-flow: row wrap;
    }
    .m-content a{
        text-decoration: none;
    }
    .box-card {
        width: 240px;
        height: 380px;
        display: flex;
        flex-direction: column;
    }
    .box-card .m-cover{
        flex: auto;
        width: 100%;
        /*border: 1px solid red;*/
    }
    .box-card .m-tip{
        width: 100%;
        height: 40px;
        /*border: 1px solid blue;*/
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .hover-on{
        width: 95%;
    }
    .hover-off{
        width: 90%;
    }
</style>